<template>
  <div class="box">
    <div class="tip">Welcome <span
      style="font-weight: bold;font-size: large;color: black">您好！您的角色是: {{ this.userinfo.role }}</span>
    </div>
    <br/>
    <div class="message">
      <div class="loginMessage">
        <div style="color: black">【当前环境】</div>
        <span class="version">本次登录ip：{{ ip }}</span>
        <span class="version">地理位置：{{ area }}</span>
        <span class="version">操作系统：{{ os }}</span>
        <span class="version">浏览器:{{ brower }}</span>
      </div>

      <el-card class="box-card todo">
        <div slot="header" class="clearfix">
          <span style="color: black">【待办事项】</span>
          <el-button @click="toadd()" style="float: right; padding: 3px 0" type="text">添加</el-button>
          <template>
            <el-dialog title="待办事项" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="待办事项" :label-width="formLabelWidth">
                  <el-input v-model="form.things" autocomplete="off"></el-input>
                </el-form-item>

              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
              </div>
            </el-dialog>

          </template>
        </div>
        <el-table :show-header="false" :data="todoList" max-height="250">

          <el-table-column width="40">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.status" @change="line(scope.row.id)"></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column>
            <template slot-scope="scope">
              <div
                class="todo-item"
                :class="{'todo-item-del': scope.row.status}">
                待办:{{ scope.row.things }}---创建时间:{{ scope.row.gmtCreate }}
              </div>

            </template>
          </el-table-column>
          <el-table-column width="60">
            <template slot-scope="scope">
              <i class="el-icon-delete" @click="del(scope.row.id)"></i>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <br/>
    <br/>

    <div class="message2">

      <div class="third">
        <div class="pi">
          <div style="color: black">【生活便利】</div>
          <div class="version">彩虹屁解压：{{ pi }}</div>
          <div class="version"> 今天是:{{ weather.date }}</div>
          <div class="version">天气:{{ weather.now }}</div>
          <div class="version">气温：{{ weather.low }}℃ -- {{ weather.high }}℃</div>
        </div>
      </div>
      <div class="four">
        <center><span style="color: black">【建设维护中】</span></center>
      </div>
    </div>

  </div>
</template>

<script>
import admin from "../api/acl";
import * as sysTool from '@/assets/js/systemTool' //系统工具
import third from "../api/third";

export default {

  name: "Welcome",
  data() {
    return {
      uid: '',
      dialogFormVisible: false,
      form: {},
      formLabelWidth: '120px',
      todoList: null,
      os: '',
      brower: '',
      ip: '',
      area: '',
      userinfo: {
        role: '',
      },
      pi: '',
      weather: {}

    }
  },
  created() {
    this.getUserInfo()
    this.getTodo()
    this.getOS()
    this.getPi()
    this.getWeather()
  },
  methods: {
    /**
     * 系统信息
     */
    getOS() {
      this.ip = sessionStorage.getItem('ip')
      this.area = sessionStorage.getItem('area')
      this.brower = sysTool.GetCurrentBrowser()
      this.os = sysTool.GetOs()
    },
    /**
     * 彩虹屁
     * @return {Promise<void>}
     */
    async getPi() {
      const {message: res} = await third.getPi()
      this.pi = res;
    },
    /**
     * 百度地图接口  获取日期，指定地区的天气
     */
    async getWeather() {
      const {data: res} = await third.getWeather()
      this.weather = res
    },
    /**
     * 需要做的事更新状态
     * @param row
     */
    line(row) {
      admin.updateStatus(row)
        .then()
      this.$message({
        message: '状态已更新',
        type: 'success',
        duration: 650
      });
      this.$router.go(0)
      // this.getTodo()
    },

    /**
     * 需要做的事列表
     */

    getTodo() {
      admin.GetTodo()
        .then(res => {
          this.todoList = res.data.todo
        })
    },
    /**
     * 打开需要做的事
     */
    toadd() {
      this.dialogFormVisible = true
    },
    /**
     * 删除需要做的事
     * @param row
     */
    del(row) {
      admin.deleteStatus(row)
        .then(response => {
          this.$message({
            message: '已删除该任务',
            type: 'warning'
          });
          this.getTodo()
        })
    },
    /**
     * 添加需要做的事
     */
    add() {
      this.dialogFormVisible = false
      admin.AddTodo(this.form)
        .then(response => {
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.getTodo()

          }
        )
    },
    /**
     * 得到指定用户信息
     */
    getUserInfo() {
      admin.getUserInfo()
        .then(response => {
          this.userinfo = response.data.admin
          this.form.uid = response.data.admin.id
          this.form.uname = response.data.admin.name

        })

    }


  }
}
</script>

<style lang="less" scoped>

.box {
  display: flex;
  flex-direction: column; //向下走
  justify-content: space-between;

  .tip {
    font-size: large;
    font-weight: bold;
  }

  .message {
    display: flex;
    justify-content: space-around;
    flex-direction: row; //向右边走
    flex-wrap: wrap; //换行 第一行在上面
    .todo {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 600px;
      height: 350px;
      border-radius: 30px;
      background-color: #ffffff;
      box-shadow: 5px 9px 9px 5px #eaf4fc;

      .todo-item-del {
        text-decoration: line-through;
        color: #999;
      }
    }

    .loginMessage {
      padding-left: 10px;
      color: #656366;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 600px;
      height: 350px;
      border-radius: 30px;
      box-shadow: 5px 9px 9px 5px #eaf4fc;
      background-color: #ffffff;


    }
  }

  .message2 {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    display: flex;
    justify-content: space-around;
    flex-direction: row; //向右边走
    flex-wrap: wrap; //换行 第一行在上面
    .third {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      color: #dddddd;
      width: 600px;
      height: 350px;
      background-color: #ffffff;
      border-radius: 30px;
      box-shadow: 5px 9px 9px 5px #eaf4fc;

      .pi {
        padding-left: 10px;
        color: #656366;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 600px;
        height: 350px;
        border-radius: 30px;
        box-shadow: 5px 9px 9px 5px #eaf4fc;
        background-color: #ffffff;
      }
    }

    .four {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 600px;
      height: 350px;
      background-color: #ffffff;
      border-radius: 30px;
      box-shadow: 5px 9px 9px 5px #eaf4fc;

    }
  }

  .version {
    border-bottom-style: solid;
    border-color: #dfdfdf;
  }
}
</style>
